<template>
  <a-form id="form-login" layout="vertical" :scroll-to-first-error="true" ref="formRef" :rules="rules" size="large" label-align="right" :model="form" :style="{ width: '300px' }" @submit="handleSubmit">
    <a-form-item field="name" label="用户名" validate-trigger="blur">
      <a-input  allow-clear  v-model="form.name" placeholder="请输入用户姓名" />
    </a-form-item>
    <a-form-item tooltip="用户密码" field="password" label="密码" validate-trigger="blur">
      <a-input-password autocomplete   allow-clear  v-model="form.password" placeholder="请输入正确的密码" />
    </a-form-item>
    <a-form-item help="2076033663@qq.com" tooltip="用户邮箱" field="email" label="邮箱">
      <a-input    allow-clear v-model="form.email" placeholder="请输入用户邮箱" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button html-type="submit">提交</a-button>
        <a-button @click="$refs.formRef.resetFields()">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="js">
import { reactive } from 'vue';
import * as rule from '@/util/Rules.js';
import '@/style/form-login.css'
import {login} from "@/api/api";
import {Message} from "@arco-design/web-vue";
import router from "@/router/index.js";

export default {
  name: 'App',
  setup() {
    const { name = {}, password = {}, email = {} } = rule.default || {};
    const handleSubmit = async ({ values, errors }) => {
      // console.log(errors);
      // 在这个地方可以采用这个赋值结构的方式进行这个赋值给这个最后的实体的类型进行这个实体结构这个类型但是好像没有这个必要你懂不懂！！
      if (errors===undefined)
      {
      try {
        let result = await login(values)
      } catch (e) {
      await   router.push('/success')
      }
      }else {
        Message.error('请输入正确的参数')
      }
     };
    const form = reactive({
      name: '',
      password: '',
      email: '',
     });
  let   rules = { name, password, email };
      rules= {...rules };
     return {
      form,
      rules,
      handleSubmit,
    };
  },
};
</script>